<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	#jd{
		width:670px;
		height: 240px;
		border: 4px solid blue;
		margin: 100px auto;
		position: relative;
	}
	#jd img{
		position: absolute;
		top: 0;
		left: 0;
		display: none;
	}
	#jd ul{
		position: absolute;
		left: 502px;
		top: 211px;
	}
	#jd ul li{
		width: 22px;
		height: 22px;
		background: #999999;
		list-style: none;
		float: left;
		margin-right: 5px;
		border-radius: 50%;
		font-size: 12px;
		line-height: 22px;
		text-align: center;
		color: white;
		font-family: Arial,Verdana,"宋体";
	}
</style>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
	
	$(function(){

		var c = 0;
		// 自动轮播调用的函数
		function run(){
			c++;
			c = (c==6)?0:c;
			// 让c号图片显示，其他图片隐藏
			// 让c号li变红色，其他的变灰色
			$('#jd img').eq(c).fadeIn(300).siblings('img').hide();
			$('#jd ul li').eq(c).css('background', '#E43C3F').siblings().css('background', '#999');
		}

		// 设置定时器
		var timer = setInterval(run,2000);

		// 鼠标移入li的效果
		$('#jd ul li').mouseover(function() {
			// 清理定时器
			clearInterval(timer);
			// 获得当前移入的li的序号
			c = $(this).index();
			// 让c号图片显示，其他图片隐藏
			// 让c号li变红色，其他的变灰色
			$('#jd img').eq(c).fadeIn(300).siblings('img').hide();
			$('#jd ul li').eq(c).css('background', '#E43C3F').siblings().css('background', '#999');
		});

		// 鼠标移出效果
		$('#jd ul li').mouseout(function() {
			// 恢复定时器
			timer = setInterval(run,2000);
		});


	})

</script>
</head>

<body>

	<div id="jd">
		<!-- img[src=images/$.jpg]*6 -->
		<img src="images/1.jpg" style="display:block;" />
		<img src="images/2.jpg" alt="" />
		<img src="images/3.jpg" alt="" />
		<img src="images/4.jpg" alt="" />
		<img src="images/5.jpg" alt="" />
		<img src="images/6.jpg" alt="" />
		<ul>
			<li style="background:#E43C3F;">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
	</div>


</body>
</html>
